<template>
  <div class="question-generator">
    <h2>题目数据生成器</h2>

    <div class="config-section">
      <h3>题目数量配置</h3>
      <div v-for="type in questionTypes" :key="type.id" class="count-control">
        <label>{{ type.name }} ({{ type.code }}):</label>
        <input type="number" v-model.number="questionCounts[type.code]" min="0">
        <span class="type-props">
          <span v-if="type.hasOption">有选项({{ type.hasOption === 1 ? '单选' : '多选' }})</span>
          <span v-if="type.hasAnswer">需答案</span>
          <span v-if="type.hasFile">需附件</span>
        </span>
      </div>
    </div>

    <div class="config-section">
      <h3>学科分类配置</h3>
      <div v-for="(subject, index) in subjects" :key="index" class="subject-control">
        <input type="text" v-model="subjects[index]" placeholder="输入学科名称">
        <button @click="removeSubject(index)" class="el-button el-button--danger el-button--mini">删除</button>
      </div>
      <button @click="addSubject" class="el-button el-button--primary el-button--mini">添加学科</button>
    </div>

    <div class="config-section">
      <h3>分类结构配置</h3>
      <div class="config-row">
        <label>每个学科的子分类数量:</label>
        <el-input-number v-model="subCategoriesPerSubject" :min="1" :max="10"></el-input-number>
      </div>
      <div class="config-row">
        <label>每个子分类的知识点数量:</label>
        <el-input-number v-model="knowledgesPerSubCategory" :min="1" :max="50"></el-input-number>
      </div>
    </div>

    <div class="config-section">
      <h3>难度分布配置</h3>
      <div class="difficulty-config">
        <div v-for="(label, index) in difficultyLabels" :key="index" class="difficulty-item">
          <label>{{ label }} ({{ index + 1 }}):</label>
          <el-input-number v-model="difficultyDistribution[index]" :min="0" :max="100" :step="5"></el-input-number>
          <span>%</span>
        </div>
        <div class="distribution-sum">
          总计: {{ distributionSum }}%
          <span v-if="distributionSum !== 100" class="error-text">(必须等于100%)</span>
        </div>
      </div>
    </div>

    <div class="action-section">
      <el-button
        type="primary"
        @click="generateData"
        :loading="generating"
        :disabled="generating || distributionSum !== 100">
        {{ generating ? '生成中...' : '开始生成数据' }}
      </el-button>

      <el-progress
        v-if="generating"
        :percentage="progressPercent"
        :status="progressStatus"
        style="margin-top: 15px; width: 80%"></el-progress>

      <el-alert
        v-if="result"
        :title="result.title"
        :type="result.type"
        :description="result.message"
        show-icon
        style="margin-top: 20px;"></el-alert>
    </div>
  </div>
</template>

<script>
import { listQuestionTypes } from '@/api/question2/type'
import { generateQuestion } from '@/api/question2/generate'

export default {
  name: 'QuestionGenerator',
  data() {
    return {
      questionTypes: [],
      questionCounts: {},
      subjects: ['数学', '语文', '英语', '物理', '化学', '生物', '历史', '地理', '政治', '计算机'],
      subCategoriesPerSubject: 5,
      knowledgesPerSubCategory: 30,
      difficultyLabels: ['容易', '偏易', '中等', '偏难', '困难'],
      difficultyDistribution: [20, 20, 20, 20, 20],
      generating: false,
      progressPercent: 0,
      result: null
    }
  },
  computed: {
    distributionSum() {
      return this.difficultyDistribution.reduce((sum, val) => sum + val, 0)
    },
    progressStatus() {
      return this.progressPercent === 100 ? 'success' : null
    }
  },
  created() {
    this.fetchQuestionTypes()
  },
  methods: {
    async fetchQuestionTypes() {
      try {
        const response = await listQuestionTypes()
        this.questionTypes = response.data
        // 初始化题目数量配置
        this.questionTypes.forEach(type => {
          this.$set(this.questionCounts, type.code, 0)
        })
      } catch (error) {
        this.$message.error('获取题型列表失败: ' + error.message)
      }
    },
    addSubject() {
      this.subjects.push('新学科')
    },
    removeSubject(index) {
      this.subjects.splice(index, 1)
    },
    async generateData() {
      if (this.distributionSum !== 100) {
        this.$message.error('难度分布总计必须等于100%')
        return
      }

      this.generating = true
      this.progressPercent = 0
      this.result = null

      try {
        const config = {
          questionCounts: this.questionCounts,
          subjects: this.subjects,
          subCategoriesPerSubject: this.subCategoriesPerSubject,
          knowledgesPerSubCategory: this.knowledgesPerSubCategory,
          difficultyDistribution: this.difficultyDistribution
        }

        // 模拟生成过程
        const totalSteps = 100
        for (let i = 0; i <= totalSteps; i++) {
          await new Promise(resolve => setTimeout(resolve, 50))
          this.progressPercent = Math.min(100, (i / totalSteps) * 100)

          // 这里实际应该调用API
          const response = await generateQuestion(config, {
            onDownloadProgress: progressEvent => {
              if (progressEvent.lengthComputable) {
                this.progressPercent = Math.round((progressEvent.loaded / progressEvent.total) * 100)
              }
            }
          })
        }

        this.result = {
          type: 'success',
          title: '生成成功',
          message: '已成功生成测试数据'
        }
      } catch (error) {
        this.result = {
          type: 'error',
          title: '生成失败',
          message: error.message
        }
      } finally {
        this.generating = false
      }
    }
  }
}
</script>

<style scoped>
.question-generator {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.config-section {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.count-control, .subject-control {
  margin: 12px 0;
  display: flex;
  align-items: center;
}

.count-control label {
  width: 200px;
  font-weight: 500;
}

.type-props {
  margin-left: 15px;
  font-size: 12px;
  color: #909399;
}

.type-props span {
  margin-right: 8px;
}

.subject-control input {
  flex: 1;
  margin-right: 10px;
}

.config-row {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.config-row label {
  width: 180px;
  font-weight: 500;
}

.difficulty-config {
  display: flex;
  flex-wrap: wrap;
}

.difficulty-item {
  display: flex;
  align-items: center;
  width: 33.33%;
  margin: 8px 0;
}

.difficulty-item label {
  width: 100px;
  font-weight: 500;
}

.difficulty-item span {
  margin-left: 5px;
}

.distribution-sum {
  width: 100%;
  margin-top: 10px;
  font-weight: 500;
  text-align: right;
}

.error-text {
  color: #f56c6c;
}

.action-section {
  margin-top: 30px;
  text-align: center;
}
</style>
